

#AbilitiesShop{
    /*height: 100%;*/
    min-width: 300px;
    horizontal-align: center;
    vertical-align: top;
    margin-top: 140px;

    transition-property: transform,position;
    transition-duration: .4s;
    z-index: -10;
    flow-children:left;

    border-radius: 5.0px;
    /*background-color: rgba(0, 0, 0, 0.51);*/
    background-size: 100%;
    padding:12px;
    /*visibility: collapse;*/
    position: -400px -250px 0px;
    transform : scale3d( 0.001,0.001,0.001);
}

.LevelUp{
    animation-name: leveluppulseglow;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ToggleShop{
    animation-name: toggleshop;
    animation-duration: 0.8s;
    animation-timing-function: linear;
}

#CloseBtn{
    vertical-align: top;
}

#AbilitiesShopBtn Button{
    flow-children:down;
    margin: 8px;
    border: 3px solid #030404;
    border-radius: 3px;
}

#AbilitiesShopBtn Button:hover{
    brightness: 2.0;
}


#AbilitiesShopBtn Image{
    height: 118px;
    width: 72px;
}



#AbilitiesShopBtn .AlignContainer{
    flow-children:down;

}
#AbilitiesShopBtn .PriceContainer .AlignContainer{
    horizontal-align: center;
    vertical-align: center;
    flow-children:right;
}

#AbilitiesShopBtn .PriceContainer{
    vertical-align: center;
    horizontal-align: center;
    width: 100%;

}

#AbilitiesShopBtn .PriceContainer Image{
    width: 20px;
    height: 20px;
    horizontal-align: center;
    vertical-align: center;
}

#AbilitiesShopBtn #BasBtn .PriceContainer{
    background-color:gradient( linear, 0% 0%, 0% 100%, from(rgb(48, 75, 110)), to(rgb(30, 45, 67)));
}

#AbilitiesShopBtn #AttrBtn .PriceContainer{
    background-color:gradient( linear, 0% 0%, 0% 100%, from(rgb(81, 110, 61)), to(rgb(50, 67, 38)));
}


#AbilitiesShopBtn #UltBtn .PriceContainer{
    background-color:gradient( linear, 0% 0%, 0% 100%, from(rgb(110, 81, 31)), to(rgb(67, 51, 16)));
}

#AbilitiesShopBtn #PtBtn .PriceContainer{
    background-color:gradient( linear, 0% 0%, 0% 100%, from(rgb(110, 110, 20)), to(rgb(67, 67, 4)));
}

#AbilitiesShopBtn #AttrBtn .CardBack{
    background-image: url("file://{resources}/images/custom_game/cardback_attr.png");
    background-size: 100%;
}

#AbilitiesShopBtn #BasBtn .CardBack{
    background-image: url("file://{resources}/images/custom_game/cardback_bas.png");
    background-size: 100%;
}

#AbilitiesShopBtn #UltBtn .CardBack{
    background-image: url("file://{resources}/images/custom_game/cardback_ult.png");
    background-size: 100%;
}

#AbilitiesShopBtn #PtBtn .CardBack{
    background-image: url("file://{resources}/images/custom_game/cardback_point.png");
    background-size: 100%;
}

#AbilitiesShopBtn{
    vertical-align: bottom;
    horizontal-align: right;
    margin-right: 200px;
    margin-bottom: 75px;
    flow-children:right;
    transition-property: transform,position;
    transition-duration: .4s;
    position: 0px -250px 0px;
    transform : scale3d( 0.001,0.001,0.001);
}

@keyframes 'leveluppulseglow'
{
    0%
    {
        box-shadow: #ffea58 -5px -5px 10px 10px;
    }


    50%
    {
        box-shadow: #9f903700 -5px -5px 10px 10px;
    }

    100%
    {
        box-shadow: #ffea58 -5px -5px 10px 10px;
    }
}

@keyframes 'toggleshop'
{
    0%
    {
        position: 0px 0px 0px;
        transform : scale3d( 1,1,1);
    }


    50%
    {
        position: -400px -250px 0px;
        transform : scale3d( 0.001,0.001,0.001);
    }

    100%
    {
        position: 0px 0px 0px;
        transform : scale3d( 1,1,1);
    }
}

